<template>
	<view class="list" v-if="show">
		<view class="addressList" v-if="addressList.length>0">
			
			<!-- <view class="addressItem">
				<view class="addressMain">
					<text class="username">小鸡吃米</text>
					<text class="telphone">18888888888</text>
					<text class="default">默认</text>
				</view>
				<view class="addressInfo">
					东胜神洲花果山水帘洞天福地东胜神洲花果山水帘洞天福地东胜神洲花果山水帘洞天福地
				</view>
			</view> -->
			
			<uni-swipe-action>
			    <uni-swipe-action-item :right-options="options"  
																	@click="onClick($event, index, item.id)" @change="swipeChange($event, index)"
																	v-for="(item, index) in addressList" :key="index">
			        <view class="addressItem">
			        	<view class="addressMain">
			        		<text class="username">{{item.username}}</text>
			        		<text class="telphone">{{item.telphone}}</text>
			        		<text class="default" v-if="item.default == 1">默认</text>
			        	</view>
			        	<view class="addressInfo">
			        		{{item.city}}{{item.address}}
			        	</view>
			        </view>
			    </uni-swipe-action-item>
					
					
			</uni-swipe-action>
			
		</view>
		<view class="empty" v-else>
			<image src="../../static/default/address.png" mode=""></image>
			<text>用户没有收货地址，请添加</text>
		</view>
		<view class="addBtn" @click="addUrl">
			添加新地址
		</view>
	</view>
</template>

<script>
import {request} from '../../utils/require.js'
	export default{
		data(){
			return{
			// 设置一开始v-if为show默认为false是为了解决刷线页面 
			// 有数据还出现背景提示图的bug 待数据加载完成时show在onload里面赋值true
				show:false,
				// 导入左滑动显示删除修改的插件不用引入 导入项目即可立即使用
				 options:[
				        {
				            text: '删除',
				            style: {
				                backgroundColor: 'red'
				            }
				        }, {
				            text: '编辑',
				            style: {
				                backgroundColor: '#007aff'
				            }
				        }
				      ],
							addressList:[]
			}
		},
		// onLoad(){
		// 	this.getData()
		// },
		onShow(){
			// 用onShow()生命周期函数 每次进入此页面就会刷新
			this.getData()
		},
		methods:{
			getData(){
				request("/member/addressList").then((res)=>{
					console.log(res.data)
					this.addressList = res.data
					this.show = true
				})
			},
			//滑动删除的方法 这里采用传递的id会减少bug出现 组件里面的方案
		    onClick(e, index, id){
					console.log(e.content.text, index)
		      if(e.content.text=="删除"){
						// uni中的showModal API点击后下方会出现提示框
						uni.showModal({
							title:'提示',
							content:'是否要删除对应数据',
							success:(res)=>{
								console.log(res)
								if(res.confirm ){
									//如果点击确认 根据索引将对应的地址删除一个
									//前端删除操作
									this.addressList.splice(index, 1)
									request('/member/addressDel',{
										id:id
									}).then((res)=>{
										console.log(res)
									})
								} else if(res.cancel){
									console.log('用户点击取消')
								}
							}
						})
					}else if(e.content.text == '编辑'){
						console.log(index, '您点击的是编辑')
						uni.navigateTo({
							url:'edit?id='+id
						})
					}
		    },
		    swipeChange(e,index){
					// console.log(e, index)
		      console.log('当前状态：'+ e +'，下标：' + index)
		    },
				addUrl(){
					uni.navigateTo({
						url:'add1'
					})
				}
		  }
	}
</script>

<style>
	.addressList{
		/* 为了下面的最后面的不被挡住 */
		padding-bottom: 90rpx;
	}
	.addressItem{
		padding: 0 35rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}
	.addressMain{
		line-height: 40rpx;
		font-size: 28rpx;
		padding-top: 30rpx;
	}
	.addressMain .telphone{
		padding: 0 20rpx 0 10rpx;
	}
	.addressMain .default{
		background: #1fc8f2;
		color: #fff;
		font-size: 20rpx;
		padding: 0 10rpx;
		text-align: center;
	}
	.addressInfo{
		font-size: 24rpx;
		line-height: 36rpx;
		color: #999;
		padding-bottom: 36rpx;
	}
	.addBtn{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		text-align: center;
		color: #fff;
		background: pink;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.empty image{
		width: 300rpx;
		height: 300rpx;
		display: block;
		margin: 200rpx auto 0;
	}
	.empty text{
		font-size: 24rpx;
		color: #999;
		text-align: center;
		display: block;
		line-height: 80rpx;
	}
</style>
